Vuetify — Scrolling and Breakpoints

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Watching Bound Element

We can watch any element’s scrolling, including the element that v-scroll is applied to.

To do that, we add the self modifier to the v-scroll directive.

For instance, we can write:

<template>
  <v-card v-scroll.self="onScroll" class="overflow-y-auto" max-height="400">
    <v-banner class="justify-center headline font-weight-light" sticky>
      Scroll Me - Method invoked
      <span class="font-weight-bold" v-text="scrollInvoked"></span>
      times
    </v-banner>

    <v-card-text>
      <div
        v-for="n in 12"
        :key="n"
        class="mb-4"
      >Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    </v-card-text>
  </v-card>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    scrollInvoked: 0,
  }),

  methods: {
    onScroll() {
      this.scrollInvoked++;
    },
  },
};
</script>

We have the v-scroll directive with the self modifier to let us watch the scrolling of itself.

Whenever the card is scrolled, the onScroll method is run.

Touch Support

The v-touch directive lets us capture swipe gestures and apply directional callbacks.

For example, we can write:

`<template>
  <v-row
    v-touch="{
      left: () => swipe('Left'),
      right: () => swipe('Right'),
      up: () => swipe('Up'),
      down: () => swipe('Down')
    }"
    align="center"
    class="grey lighten-2"
    justify="center"
    style="height: 500px"
  >
    <v-subheader>Swipe Direction</v-subheader>
    {{ swipeDirection }}
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    swipeDirection: "None",
  }),

  methods: {
    swipe(direction) {
      this.swipeDirection = direction;
    },
  },
};
</script>
`

We have the v-touch directive with the value being an object with the left , right , up and down properties that have functions that run when the swipe are in those directions.

Breakpoints

We can get the breakpoints from the app with the this.$vuetify.breakpoint property.

For instance, we can write:

`<template>
  <v-row align="center" justify="center">
    <v-col cols="12">{{ imageHeight }}</v-col>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  mounted() {
    console.log(this.$vuetify.breakpoint);
  },

  computed: {
    imageHeight() {
      switch (this.$vuetify.breakpoint.name) {
        case "xs":
          return "220px";
        case "sm":
          return "400px";
        case "md":
          return "500px";
        case "lg":
          return "600px";
        case "xl":
          return "800px";
      }
    },
  },
};
</script>
`

to create an imageHeight computed property which is derived from the breakpoint.

We get the breakpoint name with the name property.

And we display that in the template.

We can define our own breakpoint values.

For example, we can write:

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
Vue.use(Vuetify);

export default new Vuetify({
  breakpoint: {
    thresholds: {
      xs: 340,
      sm: 540,
      md: 800,
      lg: 1280,
    },
    scrollBarWidth: 24,
  },
});

in src/plugins/vuetify.js .

We defined our breakpoints with the breakpoint property.

The keys are the name and the numbers are the min-width of the breakpoint in pixels.

Conclusion

We can watch the scrolling of a bound element and define and use breakpoints with Vuetify.